<template>
	<div>
		<div class="container">
			<div class="handle-box">
				<el-select v-model="query.serviceTypeId" placeholder="服务类型" class="handle-select mr10" clearable>
					<el-option v-for="item in typeOptions" :value="item.id" :label="item.name"></el-option>
				</el-select>
				<el-select v-model="query.companyId" placeholder="所属公司" class="handle-select mr10" clearable>
					<el-option v-for="item in companyOptions" :value="item.id" :label="item.name"></el-option>
				</el-select>
					<el-select v-model="query.state" placeholder="需求状态" class="handle-select mr10" clearable>
					<el-option :value="1" label="匹配中"></el-option>
					<el-option :value="2" label="已匹配"></el-option>
					<el-option :value="3" label="已完成"></el-option>
					<el-option :value="0" label="已取消"></el-option>
				</el-select>
<!--				<el-select v-model="query.province" placeholder="现居省份" class="handle-select mr10" clearable>-->
<!--					<el-option v-for="item in provinceData" :value="item.name" :label="item.name"></el-option>-->
<!--				</el-select>-->
				<el-input v-model="query.name" placeholder="客户姓名" class="handle-input mr10" clearable></el-input>
				<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
			</div>
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header" v-loading="pageLoading">
				<el-table-column prop="id" label="编号" width="55" align="center"></el-table-column>
				<el-table-column prop="name" label="客户姓名"></el-table-column>
				<el-table-column prop="phone" label="手机号码"  :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="serviceTypeName" label="服务类型">
					<template #default="scope">
						<el-tag>{{scope.row.serviceTypeName}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="gender" label="性别需求">
					<template #default="scope">
						<span v-if="scope.row.gender === 1">男</span>
						<span v-if="scope.row.gender === 2">女</span>
						<span v-if="scope.row.gender === 0">不限</span>
					</template>
				</el-table-column>
				<el-table-column prop="province" label="服务地址" min-width="150" :show-overflow-tooltip="true">
					<template #default="scope">
						{{scope.row.province}}{{scope.row.city}}{{scope.row.town}}{{scope.row.detail}}
					</template>
				</el-table-column>
				<el-table-column prop="state" label="需求状态">
					<template #default="scope">
						<el-tag type="warning" v-if="scope.row.state === 1">匹配中</el-tag>
						<el-tag type="primary" v-if="scope.row.state === 2">已匹配</el-tag>
						<el-tag type="success" v-if="scope.row.state === 3">已完成</el-tag>
						<el-tag type="danger" v-if="scope.row.state === 0">已取消</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="发布时间" :show-overflow-tooltip="true" min-width="120"></el-table-column>
				<el-table-column label="操作" min-width="160" align="center">
					<template #default="scope">
						<el-button text :icon="Document" type="primary" @click="handleDetail(scope.row)" v-permiss="16">
							详情
						</el-button>
						<el-button text :icon="Notebook" type="primary" @click="handleMatchList(scope.row)" v-permiss="16" v-if="scope.row.state == 1"	>
							匹配列表
						</el-button>
<!--						<el-button text type="warning" key="warning" :icon="Edit" @click="handleEdit(scope.$index, scope.row)" v-permiss="15">-->
<!--							取消-->
<!--						</el-button>-->
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination
					background
					layout="total, prev, pager, next"
					:current-page="query.pageNum"
					:page-size="query.pageSize"
					:total="pageTotal"
					@current-change="handlePageChange"
				></el-pagination>
			</div>
		</div>

		<el-dialog title="详情" v-model="detailVisible" width="60%">
			<el-descriptions title="需求信息" :column="2" border>
				<el-descriptions-item label="编号">{{detailData.id}}</el-descriptions-item>
				<el-descriptions-item label="姓名">{{detailData.name}}</el-descriptions-item>
				<el-descriptions-item label="手机号码">{{detailData.phone}}</el-descriptions-item>
				<el-descriptions-item label="服务地址" :span="2">{{detailData.province}}{{detailData.city}}{{detailData.town}}{{detailData.detail}}</el-descriptions-item>
				<el-descriptions-item label="服务类型">{{detailData.serviceTypeName}}</el-descriptions-item>
				<el-descriptions-item label="性别需求">
					<span v-if="detailData.gender === 1">男</span>
					<span v-if="detailData.gender === 2">女</span>
					<span v-if="detailData.gender === 0">不限</span>
				</el-descriptions-item>
				<el-descriptions-item label="提供住宿">
					<span v-if="detailData.accommodation === 1">是</span>
					<span v-if="detailData.accommodation === 0">否</span>
				</el-descriptions-item>
				<el-descriptions-item label="结算方式">
					<span v-if="detailData.chargeMode === 0">时薪</span>
					<span v-if="detailData.chargeMode === 1">日薪</span>
					<span v-if="detailData.chargeMode === 2">月薪</span>
				</el-descriptions-item>
				<el-descriptions-item label="预期薪资">{{detailData.maxSalary}}</el-descriptions-item>
				<el-descriptions-item label="需求状态">
					<el-tag type="warning" v-if="detailData.state === 1">匹配中</el-tag>
					<el-tag type="primary" v-if="detailData.state === 2">已匹配</el-tag>
					<el-tag type="success" v-if="detailData.state === 3">已完成</el-tag>
					<el-tag type="danger" v-if="detailData.state === 0">已取消</el-tag>
				</el-descriptions-item>
				<el-descriptions-item label="发布时间">{{detailData.createTime}}</el-descriptions-item>
				<el-descriptions-item label="备注信息" :span="2">{{detailData.remark}}</el-descriptions-item>
			</el-descriptions>
			<el-descriptions title="匹配信息" :column="2" border style="margin-top: 10px" v-if="detailData.housekeeperId">
				<el-descriptions-item label="编号">{{detailData.housekeeper.id}}</el-descriptions-item>
				<el-descriptions-item label="姓名">{{detailData.housekeeper.name}}</el-descriptions-item>
				<el-descriptions-item label="所属公司">{{detailData.housekeeper.companyName}}</el-descriptions-item>
				<el-descriptions-item label="期望时/日/月薪(元)">{{detailData.housekeeper.hourSalary}}/{{detailData.daySalary}}/{{detailData.monthSalary}}</el-descriptions-item>
				<el-descriptions-item label="民族">{{detailData.housekeeper.nation}}</el-descriptions-item>
				<el-descriptions-item label="性别">
					<span v-if="detailData.housekeeper.gender === 1">男</span>
					<span v-if="detailData.housekeeper.gender === 2">女</span>
				</el-descriptions-item>
				<el-descriptions-item label="身高">{{detailData.housekeeper.height}}</el-descriptions-item>
				<el-descriptions-item label="年龄">{{detailData.housekeeper.age}}</el-descriptions-item>
					<el-descriptions-item label="服务类型">
					<el-tag v-for="item in detailData.housekeeper.typeList" style="margin-right: 10px">{{item.name}}</el-tag>
				</el-descriptions-item>
				<el-descriptions-item label="工作状态">
						<el-tag type="success" v-if="detailData.housekeeper.state === 1">空闲</el-tag>
					<el-tag type="warning" v-if="detailData.housekeeper.state === 2">繁忙</el-tag>
				</el-descriptions-item>
				<el-descriptions-item label="掌握语言">{{detailData.housekeeper.language}}</el-descriptions-item>
				<el-descriptions-item label="技能">{{detailData.housekeeper.skill}}</el-descriptions-item>
				<el-descriptions-item label="现居地" :span="2">{{detailData.housekeeper.province}}{{detailData.city}}{{detailData.town}}{{detailData.detail}}</el-descriptions-item>
				<el-descriptions-item label="注册时间">{{detailData.housekeeper.createTime}}</el-descriptions-item>
				<el-descriptions-item label="个人介绍" :span="2">{{detailData.housekeeper.introduction}}</el-descriptions-item>
<!--				<el-descriptions-item v-for="item in detailData.housekeeper.imageUrlList">-->
<!--					<el-image style="width: 200px; height: 200px" fit="fit" :src="item"></el-image>-->
<!--				</el-descriptions-item>-->
			</el-descriptions>
					<template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="detailVisible = false">关 闭</el-button>
                </span>
			</template>
		</el-dialog>

		<el-dialog title="匹配列表" v-model="matchVisible" width="80%">
			<el-table :data="matchList" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column prop="id" label="编号" width="80" align="center"></el-table-column>
				<el-table-column prop="name" label="姓名"></el-table-column>
				<el-table-column prop="companyName" label="所属公司" min-width="120" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="province" label="现居省份" min-width="80" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="nation" label="民族"></el-table-column>
				<el-table-column prop="age" label="年龄"></el-table-column>
				<el-table-column prop="gender" label="性别">
					<template #default="scope">
						<span v-if="scope.row.gender === 1">男</span>
						<span v-if="scope.row.gender === 2">女</span>
					</template>
				</el-table-column>
				<el-table-column prop="state" label="工作状态">
					<template #default="scope">
						<el-tag type="success" v-if="scope.row.state === 1">空闲</el-tag>
						<el-tag type="warning" v-if="scope.row.state === 2">繁忙</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="注册时间" :show-overflow-tooltip="true" min-width="120"></el-table-column>
				<el-table-column label="操作" min-width="290" align="center" fixed="right">
					<template #default="scope">
						<el-button text :icon="Document" type="primary" @click="handleHouseKeeperDetail(scope.row)" v-permiss="16">
							详情
						</el-button>
						<el-button text :icon="ChatLineRound" type="primary" @click="handleContact(scope.row)" v-if="role == 1">
							咨询
						</el-button>
						<el-button text :icon="Finished" type="primary" @click="handleSelectHouseKeeper(scope.row)" v-if="role == 1">
							签约
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="matchVisible = false">关 闭</el-button>
                </span>
			</template>
		</el-dialog>

		<el-dialog title="家政员详情" v-model="housekeeperDetailVisible" width="60%">
			<el-descriptions title="基本信息" :column="2" border>
				<el-descriptions-item label="编号">{{housekeeperDetailData.id}}</el-descriptions-item>
				<el-descriptions-item label="姓名">{{housekeeperDetailData.name}}</el-descriptions-item>
				<el-descriptions-item label="所属公司">{{housekeeperDetailData.companyName}}</el-descriptions-item>
				<el-descriptions-item label="期望时/日/月薪(元)">{{housekeeperDetailData.hourSalary}}/{{housekeeperDetailData.daySalary}}/{{housekeeperDetailData.monthSalary}}</el-descriptions-item>
				<el-descriptions-item label="民族">{{housekeeperDetailData.nation}}</el-descriptions-item>
				<el-descriptions-item label="性别">
					<span v-if="housekeeperDetailData.gender === 1">男</span>
					<span v-if="housekeeperDetailData.gender === 2">女</span>
				</el-descriptions-item>
				<el-descriptions-item label="身高">{{housekeeperDetailData.height}}</el-descriptions-item>
				<el-descriptions-item label="年龄">{{housekeeperDetailData.age}}</el-descriptions-item>
				<el-descriptions-item label="服务类型">
					<el-tag v-for="item in housekeeperDetailData.typeList" style="margin-right: 10px">{{item.name}}</el-tag>
				</el-descriptions-item>
				<el-descriptions-item label="工作状态">
					<el-tag type="success" v-if="housekeeperDetailData.state === 1">空闲</el-tag>
					<el-tag type="warning" v-if="housekeeperDetailData.state === 2">繁忙</el-tag>
				</el-descriptions-item>
				<el-descriptions-item label="掌握语言">{{housekeeperDetailData.language}}</el-descriptions-item>
				<el-descriptions-item label="技能">{{housekeeperDetailData.skill}}</el-descriptions-item>
				<el-descriptions-item label="现居地" :span="2">{{housekeeperDetailData.province}}{{housekeeperDetailData.city}}{{housekeeperDetailData.town}}{{housekeeperDetailData.detail}}</el-descriptions-item>
				<el-descriptions-item label="注册时间">{{housekeeperDetailData.createTime}}</el-descriptions-item>
				<el-descriptions-item label="更新时间">{{housekeeperDetailData.updateTime}}</el-descriptions-item>
				<el-descriptions-item label="个人介绍" :span="2">{{housekeeperDetailData.introduction}}</el-descriptions-item>
			</el-descriptions>
			<el-descriptions title="图片信息" direction="vertical" :column="2" border>
				<el-descriptions-item v-for="item in housekeeperDetailData.imageUrlList">
					<el-image style="width: 200px; height: 200px;  margin-right: 20px;" fit="fit" :src="item"></el-image>
				</el-descriptions-item>
			</el-descriptions>
			<template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="housekeeperDetailVisible = false">关 闭</el-button>
                </span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive, nextTick } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Plus,Document,ChatLineRound,Notebook,Finished } from '@element-plus/icons-vue';
import {
	fetchData,
	getCompanyOptions, getDemandApi, getDemandListApi,
	getHouseKeeperApi,
	getHouseKeeperListApi, getMatchListApi,
	getTypeOptions,
	updateHouseKeeperApi
} from '../api/index';
import address from "../assets/json/address.json";
import {useRouter} from "vue-router";

const query = reactive({
	serviceTypeId: '',
	companyId: '',
	province: '',
	name: '',
	pageNum: 1,
	pageSize: 10
});
const tableData = ref([]);
const role = ref(localStorage.getItem("role"));
const typeOptions = ref([]);
const companyOptions = ref([]);
// 省份数据初始化
const provinceData = ref(address);
const imageList = ref([]);
const pageTotal = ref(0);
const pageLoading = ref(false);
const getServiceTypeOptions = async () => {
	const res = await getTypeOptions({state: 1});
	if (res) {
		typeOptions.value = res.data;
	}
};
getServiceTypeOptions();
const fetchCompanyOptions = async () => {
	const res = await getCompanyOptions({state: 1});
	if (res) {
		companyOptions.value = res.data;
	}
};
fetchCompanyOptions();
// 获取表格数据
const getData = async () => {
	pageLoading.value = true;
	const res = await getDemandListApi(query);
	if (res) {
		tableData.value = res.data.content;
		pageTotal.value = res.data.count;
	}
	pageLoading.value = false;
};
getData();

// 查询操作
const handleSearch = () => {
	query.pageNum = 1;
	getData();
};
// 分页导航
const handlePageChange = (val: number) => {
	query.pageNum = val;
	getData();
};

const detailVisible = ref(false);
const detailData = ref({});
// 查看详情
const handleDetail = async (row: any) => {
	const res = await getDemandApi(row.id);
	if (res) {
		detailData.value = res.data;
		detailVisible.value = true;
	}
};

const matchVisible = ref(false);
const matchList = ref([]);
const selectedDemand = ref({});
// 查看匹配列表
const handleMatchList = async (row: any) => {
	const res = await getMatchListApi(row.id);
	if (res) {
		selectedDemand.value = row;
		matchList.value = res.data;
		matchVisible.value = true;
	}
};
// 获取家政人员详情
const housekeeperDetailVisible = ref(false);
const housekeeperDetailData = ref({});
// 查看详情
const handleHouseKeeperDetail = async (row: any) => {
	const res = await getHouseKeeperApi(row.id);
	if (res) {
		housekeeperDetailData.value = res.data;
		housekeeperDetailVisible.value = true;
	}
};

// 发起咨询
const handleContact = async (row:any) => {
	let userToken = localStorage.getItem('token');
	console.log(row.managerId);
	window.open("http://localhost:81?userToken=" + userToken +"&managerId=" + row.managerId);
};

// 签约家政员
const router = useRouter();
const handleSelectHouseKeeper = async (row: any) => {
	const p = {housekeeperId: row.id, demandId: selectedDemand.value.id, type: "demand"};
	await router.push({name: 'createOrderForm', params: p});
};


// 表格编辑时弹窗和保存
const editVisible = ref(false);
let form = reactive({
	id: null,
	name: '',
	maritalStatus: 0,
	gender: null,
	hourSalary: null,
	daySalary: null,
	monthSalary: null,
	height: null,
	age: null,
	state: 1,
	language: '',
	skill: '',
	introduction: '',
	nation: '',
	province: '',
	city: '',
	town: '',
	detail: '',
	typeIdList: [],
	imageUrlList: []
});
const editAddressRef = ref();
const imageUploaderRef = ref();
const handleEdit = async (index: number, row: any) => {
	const res = await getHouseKeeperApi(row.id);
	const d = res.data;
	Object.keys(form).map((name:any) => form[name] = d[name]);
	editVisible.value = true;
	await nextTick(() => {
		editAddressRef.value.initShow(row.province, row.city, row.town);
		imageUploaderRef.value.onInitImage(form.imageUrlList);
	});
};
const saveEdit = async () => {
	const res = await updateHouseKeeperApi(form);
	if (res) {
		editVisible.value = false;
		ElMessage.success(`修改成功`);
	}
};
const handleImageChange = (images:any) => {
	console.log("handleImageChange", images);
	imageList.value = images;
	form.imageUrlList = [];
	images.forEach((item:any) => {
		form.imageUrlList.push(item.url);
	})
};
const selectedAddress = (address: any) => {
	console.log("selectedAddress", address);
	form.province = address.province;
	form.city = address.city;
	form.town = address.town;
};
</script>

<style scoped>
.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 180px;
}

.handle-input {
	width: 180px;
}
.table {
	width: 100%;
	font-size: 14px;
}
.red {
	color: #F56C6C;
}
.mr10 {
	margin-right: 10px;
}
.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
</style>
